<template>
  <div class="bindPhone">
    <van-dialog
      v-model="showBind"
      title="您还没有绑定手机号哦~"
      show-cancel-button
      @confirm="bindConfirm"
      @cancel="cancelBind"
    >
      <div class="dialogContent">
        <div class="row row1">
          <label>手机号</label>
          <input type="number" v-model="phone" />
        </div>
        <div class="row row2">
          <label>验证码</label>
          <font>
            <input type="text" v-model="code" />
            <span @click="getPhoneCode">{{codeText}}</span>
          </font>
        </div>
      </div>
    </van-dialog>
  </div>
</template>
<script>
export default {
  props: ["uid"],
  data() {
    return {
      showBind: true,
      phone: "",
      code: "",
      codeText: "获取验证码",
      codeTime: 0
    };
  },
  mounted() {},
  methods: {
    //确认绑定
    async bindConfirm() {
      let params = {
        temporaryToken: this.$cookies.get("temporary_token"),
        account: this.phone,
        captcha: this.code
      };
      const res = await this.$axios.post(this.$api.wechatBindMobile, params);
      if (res.code == 1) {
        this.$message({
          message: "绑定成功",
          type: "success"
        });
        this.$cookies.set("first_login", 0);
        if (this.activity_id) {
          this.$router.push({
            path: "/distribution",
            query: {
              uid: this.uid
            }
          });
        }
      } else {
        this.$message({
          message: "绑定手机失败：" + res.msg,
          type: "error"
        });
      }
    },
    cancelBind() {
      //取消绑定
      this.$parent.showBind = false;
    },
    //验证码倒计时
    codeCountdown() {
      this.codeTime = 60;
      let time = setInterval(() => {
        if (this.codeTime <= 0) {
          this.codeText = "获取验证码";
          clearInterval(time);
        } else {
          this.codeTime--;
          this.codeText = this.codeTime + "s";
        }
      }, 1000);
    },

    //获取手机验证码
    async getPhoneCode() {
      if (this.codeTime > 0) {
        return false;
      }
      if (!this.phone) {
        this.$message({
          message: "手机号码不能为空",
          type: "error"
        });
        return false;
      }
      this.codeCountdown();
      let params = {
        mobile: this.phone
      };
      const res = await this.$axios.post(this.$api.sendSms, params);
    }
  }
};
</script>
<style scoped>
.bindPhone >>> .van-dialog__confirm,
.bindPhone >>> .van-dialog__confirm:active {
  color: #00c6d8;
}
.dialogContent {
  padding: 0.24rem 0.16rem;
}
.dialogContent .row1 {
  margin-bottom: 0.22rem;
}
.dialogContent label {
  font-size: 0.14rem;
  color: #353535;
  padding-right: 0.14rem;
}
.dialogContent .row1 input {
  width: 2rem;
  height: 0.3rem;
  border-radius: 5px;
  border: 1px solid #e5e5e5;
  padding-left: 0.05rem;
}
.dialogContent .row2 font {
  border: 1px solid #e5e5e5;
  width: 2rem;
  height: 0.3rem;
  display: inline-block;
  border-radius: 5px;
  border-right: none;
}
.dialogContent .row2 input {
  width: 1.16rem;
  height: 0.3rem;
  padding-left: 0.05rem;
  border: none;
}
.dialogContent .row2 span {
  width: 0.77rem;
  height: 0.3rem;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  background: #00c6d8;
  color: #fff;
  font-size: 0.12rem;
  display: inline-block;
  vertical-align: top;
  text-align: center;
  line-height: 0.3rem;
}
</style>


